<template>
  <view class="bg-1 area-filter">
    <view class="flex-1 flex" style="overflow: hidden;">
      <view class="h left-area">
        <scroll-view scrollY="true" class="h">
          <view
            v-for="(item, index) in areaList"
            :key="index"
            class="p-h24 flex-c item area-item"
            :class="[{ selected: selected.area === item.label }]"
            @click="selectArea(item)">
            <text>{{ item.label }}</text>
          </view>
        </scroll-view>
      </view>
      <view class="h flex-1 right-area">
        <scroll-view scrollY="true" class="h">
          <view
            v-for="(item, index) in streetList"
            :key="index"
            class="p-h30 m-h20 flex-c item street-item"
            :class="[{ selected: selected.street === item.label }]"
            @click="selectStreet(item)">
            <text>{{ item.label }}</text>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="bottom flex-c">
      <text class="text-400-128">切换城市 成都</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { computed, reactive, ref } from 'vue'

  type AreaItem = {
    label: string;
    children?: AreaItem[];
  }

  const areaList = ref<AreaItem[]>([
    { label: '全成都', children: [] },
    { label: '高新区', children: [{ label: '全高新区' }] },
    { label: '青羊区', children: [{ label: '全青羊区' }, { label: '三里屯街道' }] },
    { label: '武侯区', children: [{ label: '全武侯区' }] },
    { label: '金牛区', children: [{ label: '全金牛区' }] },
    { label: '温江区', children: [{ label: '全温江区' }] },
  ])

  const selected = reactive({
    area: '全成都',
    street: '',
  })

  const streetList = computed(() => {
    const cur = areaList.value.find((item) => item.label === selected.area)

    return cur?.children ?? []
  })

  const selectArea = (data: AreaItem) => {
    if (data.label === selected.area) return

    selected.area = data.label
    if (streetList.value.length > 0) {
      selected.street = streetList.value[0].label
    }
  }

  const selectStreet = (data: AreaItem) => {
    if (data.label === selected.street) return

    selected.street = data.label
  }
</script>

<style lang="scss" scoped>
	.area-filter {
		height: 790rpx;
		display: flex;
		flex-direction: column;
	}
	.left-area {
		width: 236rpx;
		background-color: $bg-color-6;
	}

	.item {
		height: 98rpx;
		color: $text-color-1;
		font-size: 30rpx;
		&.selected {
			color: $text-color-5;
			font-weight: bold;
		}
	}

	.area-item {
		&.selected {
			background-color: $bg-color-1;
		}
	}

	.street-item {
		position: relative;
		&::after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 1px;
			background-color: $border-color-2;
			transform-origin: bottom;
			transform: scaleY(0.5);
		}
	}

	.bottom {
		height: 120rpx;
	}
</style>
